<template>

  <div class="login_container">
    <el-row>
      <el-col :span="10" class="login_container_left">
        <Index class="logo" title="喵喵记账"/>
      </el-col>
      <el-col :span="14" class="login_container_right">
        <div class="form" :class="{'is-register':isRegister}">
          <PhoneLoginForm v-if="type === 1" @change-type="changeType"/>
          <QrCodeLoginForm v-else-if="type === 2" @change-type="changeType"/>
          <PasswordLoginForm v-else-if="type === 3" @change-type="changeType"/>
          <RegisterForm v-else @change-type="changeType"/>
        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script setup lang="ts">
import Index from "@/components/logo/index.vue"
import PhoneLoginForm from "@/components/login/PhoneLoginForm.vue"
import {onMounted, ref} from "vue";
import QrCodeLoginForm from "@/components/login/QrCodeLoginForm.vue";
import {useDarkModeStore} from "@/stores/useDarkModeStore.ts";
import PasswordLoginForm from "@/components/login/PasswordLoginForm.vue";
import RegisterForm from "@/components/login/RegisterForm.vue";


const type = ref<number>(1);
const isRegister = ref<boolean>(false);

//更改form类型
function changeType(value: number) {
  type.value = value
  isRegister.value = value === 4;
}


onMounted(() => {
  const darkSore = useDarkModeStore();
  darkSore.isDark = false;
})
</script>

<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/login_background.png") no-repeat;
  background-size: cover;
  //左侧
  .login_container_left {
    width: 100%;
    height: 100%;

    .logo {
      margin-left: 10px;
    }
  }

  //右侧
  .login_container_right {
    width: 100%;
    height: 100%;

    .form {
      position: relative;
      top: 20vh;
      left: 12px;
      box-sizing: border-box;
      width: 400px;
      height: 480px;
      padding: 24px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: $base-border-shadow;
    }

    //注册样式
    .is-register {
      top: 10vh;
      height: 650px;
    }
  }
}
</style>
